<template>
  <div class="showBox">
    <div class="head">
      <p>
        名称：
        <span>{{userList.userName}}</span>
      </p>
      <el-divider direction="vertical"></el-divider>
      <p>
        状态：
        <span>正常</span>
      </p>
      <el-divider direction="vertical"></el-divider>
      <p>
        所属门店：
        <span>{{userList.orgName}}</span>
      </p>
    </div>

    <div class="imgBox">
      <div class="item">
        <div class="box">
          <p>人脸定妆照</p>
          <img :src="picPath" @error="handleImgUrlError" />
          <p>示例照片</p>
        </div>

        <div class="box">
          <p></p>
          <span>
            <el-upload
              class="avatar-uploader"
              :action="actionData"
              :headers="myHeaders"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imgPath" :src="imgPath" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </span>
          <p>请选择像素大于50*50的照片</p>
        </div>
      </div>
      <!-- <div class="item item1" style="display:none">
        <div class="box">
          <p>工装定妆照</p>
          <img src="@/assets/images/img_icon/head.svg" />
          <p>示例照片</p>
        </div>

        <div class="box">
          <p></p>
          <span>
            <el-upload
              class="avatar-uploader"
              ：action="actionData"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imgPath" :src="imgPath" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </span>
          <p>请选择像素大于170*230的照片</p>
        </div>
      </div>-->
    </div>

    <div class="btnGroup">
      <el-button size="mini" round @click="$router.go(-1)">返回</el-button>
      <el-button
        type="primary"
        size="mini"
        round
        @click="commitImg"
        v-loading.fullscreen.lock="fullscreenLoading"
      >提交</el-button>
    </div>
  </div>
</template>

<script>
import { addOrUpdateEmpInfo, queryEmpInfoDetail } from "@/api/smartShops";
import axios from 'axios'
var token = JSON.parse(localStorage.getItem("logininfo"));
export default {
  components: {},
  props: {},
  data() {
    return {
      actionData: `${axios.defaults.baseURL}/api/file-service/v1/file/uploadFileByTour`,
      imgPath: "",
      fullscreenLoading: false,
      obsKey: "",
      userList: "",
      orgSeq: "",
      faceFileId: "",
      picPath: "",
      myHeaders: { token: token.token }
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleAvatarSuccess(res, file) {
      this.imgPath = res.result.objectUrl;
      this.obsKey = res.result.objectKey;
      this.$message({
        message: "上传成功",
        type: "success"
      });
    },
    beforeAvatarUpload() {}, //默认图片
    handleImgUrlError(e) {
      e.target.src = require("@/assets/images/img_icon/head.svg");
    },

    async queryEmpInfoDetail() {
      let { result } = await queryEmpInfoDetail({
        userId: this.userList.userId,
        orgSeq: this.userList.orgId
      });
      this.faceFileId = result.faceFileId;
      this.picPath = result.faceFileUrl;
    },
    getRouterData() {
      this.userList = this.$route.params.userList;
      this.orgSeq = this.$route.params.orgSeq;
      if (this.userList.faceStatus == 1) {
        this.queryEmpInfoDetail();
      }
    },
    async commitImg() {
      this.fullscreenLoading = true;
      let data = await addOrUpdateEmpInfo({
        obsKey: this.obsKey,
        faceSetName: "face-wuliangye",
        obsImgUrl: this.imgPath,
        faceId: this.faceFileId,
        size: this.pageSize,
        current: this.currentPage,
        face: {
          staffCode: this.userList.userCode,
          staffId: this.userList.userId,
          staffName: this.userList.userName,
          staffSex: this.userList.userSex,
          staffPhone: this.userList.userPhone,
          origCode: this.userList.orgCode,
          origName: this.userList.orgName,
          origId: this.userList.orgId
        }
      });
      this.fullscreenLoading = false;
      if (data.code) {
        this.$message({
          message: data.message,
          type: "success"
        });
        this.queryEmpInfoDetail();
        this.imgPath = "";
        return;
      }
      this.$message({
        message: data.message,
        type: "error"
      });
    }
  },
  created() {
    this.getRouterData();
  },
  mounted() {
  }
};
</script>
<style lang="scss" scoped>
.showBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .head {
    height: 50px;
    width: 100%;
    font-size: 14px;
    border-bottom: 1px solid #dcdfe6;
    line-height: 50px;

    p {
      display: inline-block;
    }

    span {
      font-weight: 500;
      color: red;
    }

    .el-divider {
      height: 60%;
    }
  }

  .imgBox {
    width: 100%;
    height: 68%;
    display: flex;
    justify-content: space-between;

    .item {
      width: calc(100% - 30px);
      height: 100%;
      float: left;
      box-sizing: border-box;

      .box {
        width: 50%;
        height: 100%;
        float: left;
        box-sizing: border-box;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        p {
          width: 100%;
          text-align: center;
          height: 40px;
          line-height: 40px;

          &:nth-child(3) {
            text-align: center;
          }
        }
        img {
          width: 220px;
          height: 220px;
        }

        span {
          display: block;
          width: 220px;
          height: 220px;
        }
      }
    }

    .item1 {
      .box {
        img {
          width: 80%;
          height: 80%;
        }

        span {
          display: block;
          width: 80%;
          height: 80%;
        }
      }
    }
  }

  .btnGroup {
    width: 150px;
    height: 30px;
    text-align: center;
    margin: 0 calc((100% - 150px) / 2);
    display: flex;
    /*justify-content: space-between;*/
  }
}
</style>


<style lang="scss">
.showBox {
  span {
    .avatar-uploader {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      border: 1px dashed #d9d9d9;
      overflow: hidden;
      border-radius: 6px;
      .el-upload {
        display: flex;
        width: 100%;
        height: 100%;
        color: #8c939d;
        align-items: center;
        justify-content: center;

        i {
          font-size: 40px;
        }
      }
    }
  }
}
</style>
